<template>
  <div class="crity">
     <div id="Modle" v-if="isModle">
	    <div class="db"v-if="isADD" >
		    <table border="1">
			   <tr>
			       <td>城市</td>
				   <td><input type="text" v-model='crityNames'/></td>
			   </tr>
			</table>
			<div class="buttons">
			    <button type="button" class="btn btn-success" v-on:click="Critysave()">确定</button>
			    <button type="button" class="btn btn-danger" v-on:click="Close()">取消</button>
			</div>	
		</div>
		<div class="dels" v-if="isdel">
		      <p>是否删除该城市？</p>
              <div>
			       <button type="button" class="btn btn-success" v-on:click="Crity_dels()">确定</button>
			    <button type="button" class="btn btn-danger" v-on:click="delClose()">取消</button>
			  </div>			  
		</div>
		<div  class="updata" v-if="isupdata">
		       <table border="1">
			   <tr>
			       <td>城市</td>
				   <td><input type="text" v-model='crityupdata'/></td>
			   </tr>
			</table>
			<div>
			    <button type="button" class="btn btn-success" v-on:click="Crity_updata_save()">确定</button>
			    <button type="button" class="btn btn-danger" v-on:click="updata_Close()">取消</button>
			</div>
			
		</div>
	 </div>
    <div class="head">
	   <h2>城市管理</h2>
	   <button type="button" class="btn btn-default gladd" id="gladd" v-on:click="Crityadd()">添加城市</button>
	</div>
	
	<div class="crity">
	   <div class="center">
	      <table class="table table-striped">
               <tr class="theader">
			       <td>ID</td>
				   <td>城市</td>
				   <td>操作</td>
			   </tr>
			   <tr v-for="(crity,index) in crityList">
				   <td>{{crity.id}}</td>
				   <td>{{crity.crityName}}</td>
				   <td>
				      <button type="button" class="btn btn-danger" v-on:click="Critydel(index)">删除</button>
					  <button type="button" class="btn btn-primary" v-on:click="crity_updata(index)" >修改</button>
					  </td>
			   </tr>
			   
         </table>
	   </div>
	</div>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
        crityList:[],
		isModle:false,
		crityNames:"",
		isADD:false,
		isdel:false,
		Id:"",
		isupdata:false,
		crityupdata:""
		
		}
    },
	created(){
	   this.Gljz();
	},
	methods:{
	   Gljz(){
	          this.$axios.get("http://localhost/dudubas_crity_jz.php").then(e1=>{
			      this.crityList = e1.data
				  console.log(this.crityList)
				   
			})
	   },
	   Crityadd(){
	          this.isModle = true;
			  this.isADD = true;
	   },
	   Close(){
	       this.isModle = false;
		   this.isADD = false;
	   },
	   Critysave(){
	    var _this = this;
	  
	        this.$axios.get("http://localhost/DUDUBAS_crity_ADD.php?crity="+this.crityNames).then(e1=>{
			       console.log(e1.data)
			}).then(function(){
			     _this.Gljz();
			     _this.isModle =  false;
				 _this.isADD = false
			})
	   },
	   Critydel(ins){
	       this.isModle = true;
		   this.isdel= true;
		   this.Id = this.crityList[ins].id
	   },
	   delClose(){
	      this.isModle = false;
		  this.isdel= false;
	   },
	   Crity_dels(){
	       this.$axios.get("http://localhost/dudubas_crity_del.php?id="+this.Id).then(e1=>{
		             if(e1.data == 1){
					      this.isModle = false;
		                  this.isdel= false;
						  this.Gljz();
					 }
		   })

	   },
	   crity_updata(ins){
	         this.isupdata = true;
			 this.isModle =true;
			 this.Id = this.crityList[ins].id
	   },
	   updata_Close(){
	         this.isupdata = false;
			 this.isModle =false;
	   },
	   Crity_updata_save(){
	       this.$axios.get("http://localhost/dudubas_crity_update.php?CNAME="+this.crityupdata+"&ID="+this.Id ).then(e1=>{
		                       console.log(e1.data)
		                 if(e1.data==1){
						      this.Gljz();
							  this.isupdata = false;
			                  this.isModle =false;
						 }
		   })
	   }
	   
	}
  }


</script>
<style scoped>
.crity{
    width:100%;
	height:92vh;
	background:#ffffff;
}
.head {
   height:8vh;
   width:100%;
   background:#eff1f7;
   line-height:8vh;
   display:flex;
   align-items:center;
}
h2{
  height:6vh;
  line-height:6vh;
  margin-left:5vw;
}
.center{
   width:100%;
   height:92vh;
   display:flex;
   justify-content:center;
}
 table{
    width:80%;
	margin-top:5vh;
	
 }
 tr{
     border-bottom:1px solid #cccccc;
	 height:5vh;
 }
 tr:hover{
    background:#2e7fd7;
 }
td{  
     text-align:center;
	 font-size:2rem;
	 
}
.theader{
    background:#cccccc;
}
#gladd{
      margin-left:65vw;
}
#Modle{
   width:100%;
   height:100vh;
   background:rgba(000,000,000,0.5);
   position:fixed;
   z-index:999;
   display:flex;
   align-items:center;
   justify-content:center;
}
.db{ 
    background:#ffffff;
	width:40%;
	height:30vh;
	display:flex;
   align-items:center;
   justify-content:center;
   flex-direction:column;
}
#Modle table{
     border:1px solid black;
	  
}
#Modle td{
    height:4vh;
    line-height:4vh;
}
#Modle tr:hover{background:#ffffff;}
#Modle input{width:100%;border:none;}
.buttons{
           width:60%;
		   display:flex;
        align-items:center;
        justify-content:center;
		margin-top:2vh;
	  }
.buttons button{margin-left:5vw;margin-right:5vw;}
  .dels{
      width:30%;
	  height:20%;
	  background:#ffffff;
	  display:flex;
   align-items:center;
   justify-content:center;
   flex-direction:column;
  }   
.updata{
     width:30%;
	  height:20%;
	  background:#ffffff;
	  display:flex;
   align-items:center;
   justify-content:center;
   flex-direction:column;   
}  

</style>
